<template>
  <!-- 能力：
        1、默认的展示效果 -> 左边后退按钮的图标、中间页面的名称、右边是空白的内容
        2、可通过插槽来配置具体的展示样式 -> 左、中、右 三个插槽,父组件可以通过这三个插槽来制定对应位置的布局
        3、可以接收从外部指定的一个样式 (可以在父组件中指定 navigationBar 的 style)-->
  <div class="nav-bar z-index-max" :style="navBarStyle"
  :class="{'bottom-line' : pageName}">
   <div class="left" @click = "$emit('onLeftClick')">
     <img src="@imgs/back.svg" alt="" v-if="isShowBack">
     <slot name="nav-left"></slot>
   </div>
   <div class="center">
     <span class="page-title">{{pageName}}</span>
     <slot name="nav-center"></slot>
   </div>
   <div class="right">
     <slot name="nav-right"></slot>
   </div>
  </div>
</template>

<script>
export default {
  props: {
    pageName: String,
    isShowBack: {
      type: Boolean,
      default: true
    },
    /**
    navBar 样式 */
    navBarStyle: {
      type: Object,
      default: function () {
        return {
          backgroundColor: 'white'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@css/style.scss';
  .nav-bar {
    width: 100%;
    height: px2rem(44);
    line-height: px2rem(44);
    display: flex;
    justify-content: space-between;

    .left, .right {
      display: flex;
      height: 100%;
      width: px2rem(26);
      padding: 0 $marginSize;

      img {
        width: 100%;
        align-self: center;
      }
    }
    .center {
      height: 100%;
      display: flex;
      flex-grow: 1;

      .page-title {
        align-self: center;
        font-size: $titleSize;
        margin: 0 auto;
      }
    }
  }
  .bottom-line {
    border-bottom: 1px solid $lineColor;
  }
</style>
